/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="goods-mes pd-bg-fff">
				<view class="goods-img">
					<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ goodsInfo.goods_id+'&width=400&height=400'" role="img"></image>
				</view>
				<view class="goods-des">
					<view class="goods-name ellipsis-1">{{goodsInfo.goods_name}}</view>
					<view class="goods-package">
						<view class="goods-price">价格:￥{{goodsInfo.goods_price}}</view>
						<view class="goods-num">数量:×{{goodsInfo.goods_num}}</view>
					</view>
				</view>
			</view>
			<view class="service pd-bg-fff">
				<view class="service-title">服务类型</view>
					<view class="chcek-btns"v-for="(item,index) in checkBtns" :key="index">
						<view :class="[index==checkedBtnIndex?'checkedBtn':'']" @tap="checkBtn" :data-index="index">
							{{item}}
						</view>
					</view>
				
			</view>
			<view class="apply-num">
				<view class="apply-title">申请数量</view>
				<view class="count">
					<view @tap="subNum" class="sup-btns">-</view>
					<input @blur="setNum" type="number" value="" v-model="params.goods_num">
					</input>
					<view @tap="addNum" class="add-btns">+</view>
				</view>
			</view>
			<view class="cause" >
				<view class="cause-title">提交原因</view>
				<view @tap="openPop" class="cause-cont">{{causeCont}}</view>
			</view>
			<view v-if="isShow">
				<view @tap="closePop" class="cover-layer"></view>
				<view class="cause-pop">
					<view class="pop-title">提交原因</view>
					<view @tap="closePop" class="close-btn">×</view>
					<view class="cause-list">
						<block v-for="(item,index) in causeList" :key="index">
							<view @tap="selectCause" class="cause-item" :data-index="index">
								<image class="choose" :class="[index==causeListIndex?'db':'dn']" :src="imgUrl+'common/ischeck.png'" ></image>
								<image class="choose" :class="[index==causeListIndex?'dn':'db']" :src="imgUrl+'cart/nocheck.png'" role="img" ></image>
								{{item}}
							</view>
						</block>
						
						<!-- <view bindtap="selectCause" class="cause-item" data-i="1">
							<icon color="gray" size="20" type="success" role="img"></icon>
							操作有误（商品、地址等选错）
						</view>
						<view bindtap="selectCause" class="cause-item" data-i="2">
							<icon color="gray" size="20" type="success" role="img"></icon>
							重复下单/误下单
						</view>
						<view bindtap="selectCause" class="cause-item" data-i="3">
							<icon color="gray" size="20" type="success" role="img"></icon>
							其他渠道价格更低
						</view>
						<view bindtap="selectCause" class="cause-item" data-i="4">
							<icon color="gray" size="20" type="success" role="img"></icon>
							该商品降价了
						</view>
						<view bindtap="selectCause" class="cause-item" data-i="5">
							<icon color="gray" size="20" type="success" role="img"></icon>
							不想买了
						</view>
						<view bindtap="selectCause" class="cause-item" data-i="6">
							<icon color="gray" size="20" type="success" role="img"></icon>
							其他原因，详见问题描述
						</view> -->
					</view>
				</view>
			</view>
			<view class="receiving-wrap">
				<view class="receiving-title">货物状态</view>
				<view class="receiving-status">
					<view @tap="selectGoodsStatus" class="receiving" :data-status="0" v-if="checkedBtnIndex!=0&&checkedBtnIndex!=3">
						<image class="choose"  :src="isReceive?'common/ischeck.png':'cart/nocheck.png'" ></image>
						
						未收到货
					</view>
					<view @tap="selectGoodsStatus" class="receiving" :data-status="1">
						<image class="choose" :src="isReceive1?'common/ischeck.png':'cart/nocheck.png'" ></image>
						
						已收到货
					</view>
				</view>
			</view>
			<view class="evaluation">
				<view class="evaluation-title">问题描述</view>
				<textarea @input="InputDescription" v-model="params.describe"  class="word-box"maxlength="500"placeholder="请你在此描述详细问题">
					
					</textarea>
					<view class="words-num">{{500 - textNum}}/500</view>
			</view>
			<view class="upload-img">
				<view class="upload-title">上传照片</view>
				<view class="pic-list">
					<block v-for="(item,index) in 5" :key="index">
						<view class="share-pic">
							<image @longtap="removePhoto" @tap="selectPhotos" class="wh100" :data-idx="index" :src="filePaths[index]?filePaths[index]:defaultPhoto" role="img"></image>
						</view>
					</block>
					
					
				</view>
				<view class="upload-tips">为帮助我们更好的解决问题，请上传照片。最多5张，每张不超过5M，支持JPG、BMP、PNG</view>
			</view>
			<view class="contact pd-bg-fff">
				<view class="address">店家:{{store_name}}</view>
				<view class="address">联系地址:{{deliveryInformation.store_address_province_name}}{{deliveryInformation.store_address_city_name}}{{deliveryInformation.full_address}}</view>
				<view class="tel">客服电话:{{deliveryInformation.store_address_mobile}}</view>
			</view>
			<view class="btn-wrap">
				<view @tap="submiApply" class="submit-btn">提 交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getOrderGoods,postReturnGoods,getLogistics,getStore,getReturnGoods} from "@/api/api.js";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import select from "@/common/selectFiles.js";
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				checkBtns:["仅退货", "退货退款", "换货", '维修'],//服务按钮tab
				checkedBtnIndex:0,//服务索引
				
				causeCont: '注意保持商品的完好,建议您先与卖家沟通', //提交原因，默认提示文字
				causeList: ["订单不能按预计时间送达", "操作有误（商品、地址等选错）", "重复下单/误下单", "其他渠道价格更低", "该商品降价了", "不想买了", "其他原因，详见问题描述"],
				causeListIndex:-1,//原因索引
				goodsInfo:"",
				storeInfo:"",
				textNum:0,//字 length
				isReceive:false,//未收到货
				isReceive1:false,//
				isShow:false,
				defaultPhoto:"common/camera.png",//默认图片
				filePaths:[],//图片本地路径
				uploadPath:[],//上传图片路径
				isLongPress: false, //是否进行长按图片操作,解决有些手机上短按和长按同时触发的问题
				params:{
					
					goods_num:1, //退货数量
					// order_id:"",//订单id
					rec_id:"",
					reason:"",//申请原因
					type:"0",//退款类型  0仅退款 1退货退款 2换货 3维修
					describe:"",//问题描述
					imgs:"",//图片
					is_receive:"0", //申请售后时是否已收货0未收货1已收货
				},
				deliveryInformation:"",//发货信息
				store_name:"",
			};
		},
		onLoad(options){
			console.log(options)
			let params={
				rec_id:options.rec_id
			}
			this.getOrderGoods(params)
			this.params.rec_id=options.rec_id
			// this.getLogistics(options.delivery_id)
		},
		methods:{
			/*获取订单商品*/
			getOrderGoods(params){
				getOrderGoods(params).then(res=>{
					console.log(res)
					this.goodsInfo=res
					
				}).then(()=>{
					/*店铺信息*/ 
					let store_id=this.goodsInfo.store_id;
					getStore(store_id).then(res=>{
						console.log(res)
						this.store_name=res.store_name
					})
				}).then(()=>{
					/*发货信息*/ 
					let params={
						order_id:this.goodsInfo.order_id
					}
					getLogistics(params).then(res=>{
						console.log(res)
						this.deliveryInformation=res;
					})
				})
			},
			/*店铺*/ 
			getStore(params){
				
			},
			/*切换服务类型*/ 
			checkBtn(e){
				console.log(e)
				var index= e.currentTarget.dataset.index;
				this.checkedBtnIndex=index;
				this.params.type=index;
				console.log(this.params.is_receive)
			},
			/*打开提交弹窗*/ 
			openPop(){
				this.isShow=true;
			},
			/*关闭*/
			 closePop(){
				 this.isShow=false;
			 },
			/*选择原因*/ 
			selectCause(e){
				console.log(e)
				var index=e.currentTarget.dataset.index;
				console.log(index)
				this.causeListIndex=index;
				this.causeCont=this.causeList[index];
				this.params.reason=this.causeList[index];
			},
			/*勾选*/ 
			selectGoodsStatus(e){
				// console.log(e)
				var status=e.currentTarget.dataset.status;
				// console.log(status)
				if(status=="1"){
					if(this.checkedBtnIndex==1||this.checkedBtnIndex==2){
						if(!this.isReceive1){
							this.params.is_receive=1;
							this.isReceive1=true;
							this.isReceive=false;
							return
						}else{
							// console.log("关闭")
							this.params.is_receive=0;
							this.isReceive=true;
							this.isReceive1=false;
							return
						}
						
						
					}else{
						this.isReceive1=!this.isReceive1;
						// console.log(this.)
						console.log(this.isReceive1)
						if(this.isReceive1){
							this.params.is_receive=1;
						}else{
							this.params.is_receive=0;
						}
					}
					
				}else if(status=="0"){
					if(this.checkedBtnIndex==1||this.checkedBtnIndex==2){
						if(!this.isReceive){
							this.params.is_receive=0;
							this.isReceive=true;
							this.isReceive1=false;
							return
						}else{
							// console.log("关闭")
							this.params.is_receive=1;
							this.isReceive1=true;
							this.isReceive=false;
							return
						}
					}else{
						this.isReceive=!this.isReceive
						if(this.isReceive){
							this.params.is_receive=1;
						}else{
							this.params.is_receive=0;
						}
					}
					
				}
				
			},
			/*数量加*/
			addNum(){
				this.params.goods_num++;
			},
			/*数量减*/ 
			subNum(){
				if(this.params.goods_num==1){
					common.toast("none","数量最少为1",3000)
					return;
				}
				this.params.goods_num--
			},
			/*文本框字数*/ 
			InputDescription(e){
				
				this.textNum=e.detail.value.length
			},
			/*输入*/
			setNum(e){
				var num=e.detail.value
				console.log(num)
				if(num<1){
					common.toast("none","数量最少为1",3000)
					this.params.goods_num=1;
					return;
				}
				
			},
			/*选择图片*/
			selectPhotos(e){
				if (this.isLongPress) {
					this.isLongPress = false;
					return;
				}
				var that=this;
				select.selectPhotos(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
					that.filePaths=filePaths 
					/*替换图片重绘*/ 
					that.$forceUpdate()
					console.log(filePaths)
				});
			},
			/*删除图片*/
			removePhoto(e){
				var that = this;
				this.isLongPress = true;
				select.removePhoto(this.filePaths,e.currentTarget.dataset.idx,function(filePaths){
					that.filePaths=filePaths 
				})
			},
			/*上传图片*/
			postImg(call,pathIdx){
				var that=this;
				if(that.filePaths.length==0){
					return call()
				}
				if(typeof pathIdx!="number"){
					pathIdx=0;
				}else if(pathIdx>=that.filePaths.length){ //图片上传
					
					// this.postGoodsComment(JSON.stringify(goodsParams))
					return call();
				}
				uni.uploadFile({
					url: "/api"+'/mall/upload', 
					filePath: that.filePaths[pathIdx],
					name: 'file',
					formData: {
						type:"return_goods",
					},
					success: (res) => {
					
						
						that.uploadPath[pathIdx]=JSON.parse(res.data).result
						console.log(res)
						 that.postImg(call, pathIdx + 1); //递归上传多张图片
					}
				});
			},
			/*申请售后*/
			postReturnGoods(params){
				postReturnGoods(params).then(res=>{
					console.log(res)
					if(typeof(res)=="number"){
						common.toast("none","提交成功",3000)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/user/return_goods_info/return_goods_info?id=' +res
							})
						},3000)
					}
				})
			},
			//查询售后信息
			/*提交售后信息*/ 
			submiApply(){

				var that = this;
				console.log(that.params)
				that.checkSubmit(function(){
					that.postImg(function () {
						that.params.imgs=that.uploadPath.join(',')
						that.postReturnGoods(that.params)
					})
					
				})
				
			},
			checkSubmit(call){
				var that=this;
				if(!that.params.goods_num){
					common.toast("none","请输入退货数量",3000);
					return;
				}
				if(!that.params.reason){
					common.toast("none","请选择申请原因",3000);
					return;
				}
				if(that.params.type==""){
					common.toast("none","请选择退款类型",3000);
					return;
				}
				if(!that.params.describe){
					common.toast("none","请选择输入问题描述",3000);
					return;
				}
				if(that.filePaths.length==0){
					uni.showModal({
					    title:"",
					    content: "确定不上传图片吗？",
						showCancel:false,
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
								call()
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
				call()
			}
		}
	}
</script>

<style lang="scss">
	.goods-mes{
	    height: 100rpx;
	    display: flex;
	    padding:20rpx 30rpx;
	    justify-content:space-between;
	}
	.goods-img{
	    width: 100rpx;
	    height: 100rpx;
	    overflow: hidden;
	}
	.goods-des{
	    width: 560rpx;
	}
	.goods-des>view{
	    width: 100%;
	    line-height: 1;
	    font-size: 30rpx;
	    color: #333;
	}
	.goods-package{
	    display:flex;
	    margin-top:36rpx;
	}
	.goods-package>view{
	    font-size:24rpx;
	    color:#666;
	}
	.goods-price{
	    margin-right:30rpx;
	}
	.service{
	    margin-top:20rpx;
	    color: #333;
	}
	.service-title{
	    font-size:32rpx;
	    height: 80rpx;
	    line-height: 80rpx; 
	    font-weight: bold;
	}
	.chcek-btns{
	    display: flex;
	    padding-bottom: 20rpx;
	}
	.chcek-btns>view{
	    height: 54rpx;
	    padding: 0 30rpx;
	    margin-right: 20rpx;
	    line-height: 54rpx;
	    border: 1px solid  #f3f3f3;
	    font-size: 30rpx;
	    border-radius: 10rpx;
	}
	.chcek-btns .checkedBtn{
	    border-color: #ff3b3b;
	    color: #ff3b3b;
	}
	.apply-num{
	    margin-top:20rpx;
	    color: #333;
	    font-size: 32rpx;
	    padding: 0 30rpx 20rpx;
	    background-color: #fff; 
	    font-weight: bold;
	}
	.apply-title{
	    height: 80rpx;
	    line-height: 80rpx; 
	    font-weight: bold;
	}
	.count{
	    display: flex;
	    width: 152rpx;
	    border: 1px solid #f3f3f3;
	    border-radius: 10rpx;
	    
	}
	.count>view,.count>input{
	    width: 50rpx;
	    height: 50rpx;
	    line-height: 50rpx;
	    text-align: center;
	}
	.count>input{
	    border-left: 1px solid #f3f3f3;
	    border-right: 1px solid #f3f3f3;
	}
	.cause{
	    display: flex;
	    padding: 20rpx 30rpx;
	    margin-top: 20rpx;
	    background-color: #fff;
	    line-height: 42rpx;
	    overflow: hidden;
	}
	.cause-title{
	    font-size: 32rpx;
	    color: #333;
	    margin-right: 20rpx;
	}
	.cause-cont{
	    font-size: 28rpx;
	    color: #666;
	    width: 540rpx;
	    height: 42rpx;
	}
	.cause-pop{
	    position: fixed;
	    z-index: 12;
	    left: 0;
	    bottom: 0;
	    width:690rpx;
	    padding:20rpx 30rpx 50rpx;
	    color: #666;
	    font-size: 28rpx;
	    background-color: #fff;
	}
	.close-btn{
	    position: absolute;
	    right: 30rpx;
	    top: 35rpx;
	    font-size: 40rpx;
	    width: 50rpx;
	    height: 50rpx;
	    line-height: 50rpx;
	    text-align: center;
	    color: #333;
	}
	.pop-title{
	    height: 72rpx;
	    line-height: 72rpx;
	    text-align: center;
	    color: #333;
	}
	.cause-item{
	    display: flex;
	    align-items: center;
	    height: 60rpx;
	    margin:10rpx 0;
	}
	.cause-item>icon{
	    margin-right: 20rpx;
	}
	.receiving-wrap{
	    padding: 20rpx 30rpx;
	    margin-top: 20rpx;
	    background-color: #fff;
	}
	.receiving-title{
	    line-height: 60rpx;
	    font-size:32rpx;
	    color:#333;
	    font-weight: bold;
	}
	.receiving-status{
	    display: flex;
	}
	.receiving{
	    height:60rpx;
	    display: flex;
	    align-items: center;
	    font-size: 30rpx;
	    color: #666;
	    margin-right: 30rpx;
	}
	.receiving>icon{
	    margin-right: 20rpx;
	}
	.evaluation{
	    padding: 30rpx 30rpx;
	    margin-top: 20rpx;
	    position: relative;
	    font-size: 28rpx;
	    background-color: #fff;
	    font-weight: bold;
	}
	.evaluation-title{
	    margin-bottom:20rpx; 
	    line-height: 50rpx;
	    font-size: 32rpx;
	    color: #333;
	    border-bottom: 1px solid #f3f3f3;  
	}
	.word-box{
	    color: #333;
	    line-height: 40rpx;
	    width: 100%;
	    height: 200rpx;
	}
	.words-num{
	    position: absolute;
	    right:30rpx;
	    bottom:30rpx;
	    color: #666;
	}
	.upload-img{
	    padding: 20rpx 30rpx;
	    margin-top: 20rpx;
	    background-color: #fff;
	}
	.upload-title{
	    line-height: 60rpx;
	    font-size: 32rpx;
	    color: #333;
	    font-weight: bold;
	}
	.pic-list{
	    display: flex;
	    padding: 20rpx 0;
	    justify-content: space-around;
	}
	.share-pic{
	    width: 126rpx;
	    height: 126rpx;
	    border: 1px solid #f3f3f3;
	    overflow: hidden;
	}
	.upload-tips{
	    font-size: 28rpx;
	    color: #666;
	    line-height: 40rpx;
	}
	.contact{
	    margin-top: 20rpx;
	    line-height: 72rpx;
	    font-size: 32rpx;
	    color: #333;
	}
	.btn-wrap{
	    padding: 20rpx 0;
	}
	.submit-btn{
	    width: 320rpx;
	    height: 80rpx;
	    line-height: 80rpx;
	    text-align: center;
	    background-color:#f15353;
	    color: #fff;
	    margin:auto;
	}
	.choose{
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
	}
	.dn{
		display: none;
	}
	.db{
		display: block;
	}
</style>
